<template>
	<view class="container box">
		<scroll-view scroll-y="true" v-if="kgData">
			<view class="head">
				<view class="title interval">
					{{kgData.title}}
				</view>
				<view class="time interval">
					{{kgData.time}}
				</view>
			</view>
			<image :src="kgData.img" mode="aspectFit" class="img interval" />
			<view class="info">
				{{kgData.info}}
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		getKGData
	} from '../../../../database/index.js'
	export default {
		async onPullDownRefresh() {
			let datas = await getKGData({
				_id: opt.id
			})
			this.kgData = datas[0]
		},
		async onLoad(opt) {
			this.id = opt.id
			let datas = await getKGData({
				_id: opt.id
			})
			this.kgData = datas[0]
		},
		data() {
			return {
				id: '',
				kgData: '',
				time: ''
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.box {
		text-align: center;

		.head {
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.title {
				text-align: left;
				font-size: 1.5rem;
				color: black;
				font-weight: bold;
				letter-spacing: 1rpx;
			}

			.time {
				text-align: left;
				font-size: 0.8rem;
				color: $global_text;
			}
		}
	}




	.img {
		margin: 15rpx 0;
		width: 400rpx;
		height: 260rpx;
	}

	.info {
		letter-spacing: 0.1rem;
		text-align: left;
		font-size: 0.8rem;
		color: #7f7f7f;
		line-height: 1.5rem;
	}

	.interval {
		margin-bottom: 20rpx;
	}
</style>